<template>
    <div>
        <!-- 模板中想要取值，直接通过$store.state.property就可以取到了 -->
        <h1>当前值：{{ n }}</h1>
        <h1>当前值：{{ doubleN }}</h1>
        <select v-model="optNum">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <!-- 如果使用了map映射，需要注意参数的传递 -->
        <button @click="INCREASE(optNum)">+</button>
        <button @click="REDUCE(optNum)">-</button>
        <button @click="addOdd(optNum)">当前数字为奇数再加</button>
        <button @click="addWait(optNum)">等会再加</button>
    </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
    name: "Count",
    data() {
        return {
            optNum: 1,
        };
    },
    computed: {
        // 对象写法，键值对映射，这里计算属性的名称和state中的名字可以不一样
        // ...mapState({ num: "n" }),
        // 数组写法，默认把state中的名字作为计算属性中的名字
        ...mapState(["n"]),

        // 对象写法，键值对映射，这里计算属性的名称和getters中的名字可以不一样
        // ...mapGetters({ doubleN: "doubleN" }),
        // 数组写法，默认把getters中的名字作为计算属性中的名字
        ...mapGetters(["doubleN"]),
    },
    methods: {
        // 和vuex相关的函数都可以用相关的map映射
        // increase() {
        //   // 简单的、不涉及逻辑判断以及ajax请求的操作直接通过commit执行mutations中的方法
        //   this.$store.commit("INCREASE", this.optNum);
        // },
        // reduce() {
        //   // 简单的、不涉及逻辑判断以及ajax请求的操作直接通过commit执行mutations中的方法
        //   this.$store.commit("REDUCE", this.optNum);
        // },
        // addOdd() {
        //   // 复杂逻辑、涉及ajax请求的操作需要通过dispatch请求actions执行一些逻辑之后，再通过commit执行mutations中的方法
        //   this.$store.dispatch("addOdd", this.optNum);
        // },
        // addWait() {
        //   // 复杂逻辑、涉及ajax请求的操作需要通过dispatch请求actions执行一些逻辑之后，再通过commit执行mutations中的方法
        //   this.$store.dispatch("addWait", this.optNum);
        // },

        // mutations方法的映射会直接把使用时传递的参数传递进去，如果html结构中没有传递参数，但是store中定义了形参，那么就会传递当前的vuecomponent
        // 对象写法，键值对映射，这里计算属性的名称和mutations中的名字可以不一样
        // ...mapMutations({ increase: "INCREASE", reduce: "REDUCE" }),
        // 数组写法，默认把mutations中的名字作为计算属性中的名字
        ...mapMutations(["INCREASE", "REDUCE"]),

        // actions方法的映射会直接把使用时传递的参数传递进去，如果html结构中没有传递参数，但是store中定义了形参，那么就会传递当前的vuecomponent
        // 对象写法，键值对映射，这里计算属性的名称和actions中的名字可以不一样
        // ...mapActions({ addOdd: "addOdd", addWait: "addWait" }),
        // 数组写法，默认把actions中的名字作为计算属性中的名字
        ...mapActions(["addOdd", "addWait"]),
    },
};
</script>

<style></style>
